<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .login-container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background: #fff;
            font-family: 'Arial', sans-serif;
        }

        .login-container h2 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }

        .login-form {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .input-field {
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        .input-field:focus {
            border-color: #409eff;
            outline: none;
        }

        .login-btn {
            padding: 12px;
            background-color: #409eff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .login-btn:hover {
            background-color: #66b1ff;
        }

        .register-link {
            text-align: center;
            color: #666;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s;
        }

        .register-link:hover {
            color: #409eff;
        }

        .custom-slot {
            padding: 10px;
            background-color: #f5f7fa;
            border-radius: 4px;
            margin: 10px 0;
        }

        .setReactive {
            height: 200px;
            width: 300px;
            background-color: #f5f7fa;
        }
    </style>
</head>
<body>
<div id="app">
</div>
<script type="module">
   import { createRenderer } from "./render.js";
   const renderer = createRenderer({ //原生dom方法作为配置项
       createElement(tag) {
           return document.createElement(tag)
       },
       setElementText(el, text) {
           el.textContent = text
       },
       // 添加父节点的方法
       insert(el, parent, anchor = null) {
           parent.insertBefore(el, anchor)
       }
   })

   const LoginComponent = {
       name: 'LoginComponent',
       props: {
           title: {
               type: String,
               default: '用户登录'
           },
           showRegisterLink: {
               type: Boolean,
               default: true
           }
       },
       emits: ['login', 'register'],
       setup(props, { emit }) {
           const formData = reactive({
               username: '123',
               password: ''
           })

           const handleLogin = () => {
               if (!formData.username || !formData.password) {
                   alert('请输入用户名和密码')
                   return
               }
               emit('login', formData)
           }

           const handleRegister = () => {
               emit('register')
           }

           return {
               formData,
               handleLogin,
               handleRegister
           }
       },
       data() {
           return{

           }
       },
       render() {
           return {
               type: 'div',
               props: {
                   class: 'login-container'
               },
               children: [
                   {
                       type: 'h2',
                       children: this.title
                   },
                   {
                       type: 'div',
                       children: '数据响应式变化，监测用户名输入框：  ' + this.formData.username,
                       props: {
                           class: 'setReactive'
                       }
                   },
                   {
                       type: 'div',
                       props: {
                           class: 'login-form'
                       },
                       children: [
                           {
                               type: 'input',
                               props: {
                                   type: 'text',
                                   placeholder: '用户名',
                                   class: 'input-field',
                                   value: this.formData.username,
                                   onInput: (e) => this.formData.username = e.target.value
                               }
                           },
                           {
                               type: 'input',
                               props: {
                                   type: 'password',
                                   placeholder: '密码',
                                   class: 'input-field',
                                   value: this.formData.password,
                                   onInput: (e) => this.formData.password = e.target.value
                               }
                           },
                           {
                               type: 'button',
                               props: {
                                   class: 'login-btn',
                                   onClick: this.handleLogin
                               },
                               children: '登录'
                           },
                           {
                               type: 'header',
                               children: [this.$slots.header()]
                           },

                           // this.$slots.default ? {
                           //     type: 'div',
                           //     props: {
                           //         class: 'custom-slot'
                           //     },
                           //     children: this.$slots.default()
                           // } : null,
                           this.showRegisterLink ? {
                               type: 'a',
                               props: {
                                   href: '#',
                                   class: 'register-link',
                                   onClick: (e) => {
                                       e.preventDefault()
                                       this.handleRegister()
                                   }
                               },
                               children: '没有账号？立即注册'
                           } : null
                       ].filter(Boolean)
                   }
               ]
           }
       }
   }

   const loginVnode = {
       type: LoginComponent,
       props: {
           title: '欢迎登录',
           showRegisterLink: true
       },
       children: {
           header() {
               return {
                   type: 'h3',
                   children: '插槽'
               }
           }
       }
   }


   renderer(loginVnode, document.querySelector('#app'))
</script>
</body>
</html>
